<template>
	<form class="content" @submit="toPay2" report-submit="true">
		<view class="content-top">
			<uni-segmented-control :current="type_current" :values="type_items" @clickItem="onTypeItem"
				style-type="text" active-color="#333" v-if="storeSwitch == 1"></uni-segmented-control>
			<view class="content">
				<view v-show="type_current === 0">
					<!-- 收货地址信息 -->
					<view class="cell-group margin-cell-group" style="margin:20rpx 30rpx;border-radius: 25rpx;"
						v-if="userShip && userShip.id" @click="showAddressList">
						<view class="cell-item add-title-item right-img cell-item-mid" style="margin: 0 30rpx;">

							<view class="cell-item-bd cell-item-bd-block">

								<view class="cell-bd-view">
									<view class="cell-item-hd">
										<image src="/static/dw.png" style="width: 24upx;height: 29upx;">
										</image>
									</view>
									<text class="cell-bd-text address">{{ userShip.area_name || '' }}
										{{ userShip.address || '' }}</text>
								</view>
								<view class="cell-bd-view">
									<view class="cell-bd-text"
										style="font-size: 27rpx;color: #B9B9B9FF;margin-left: 34rpx;">
										{{ userShip.name || '' }} {{ userShip.mobile || '' }}
									</view>
								</view>
							</view>
							<view class="cell-item-ft">
								<image class="cell-ft-next icon" src="/static/image/right.png"></image>
							</view>
						</view>
					</view>
					<view class="cell-group margin-cell-group" v-else>
						<view class="cell-item add-title-items"><button class="btn btn-b" @click="goAddress()"
								hover-class="btn-hover2">添加收货地址</button></view>
					</view>
				</view>
				<view v-show="type_current === 1">
					<!-- 门店信息 -->
					<view v-if="store && store.id && store.id != 0" class="cell-group margin-cell-group"
						@click="goStorelist()">
						<view class="cell-item add-title-item right-img cell-item-mid">
							<view class="cell-item-hd">
								<image class="cell-hd-icon" src="/static/image/homepage.png"></image>
							</view>
							<view class="cell-item-bd cell-item-bd-block">
								<view class="cell-bd-view">
									<text class="cell-bd-text">{{ store.name || '' }}</text>
									<text class="cell-bd-text-right">{{ store.mobile || '' }}</text>
								</view>
								<view class="cell-bd-view">
									<text class="cell-bd-text address">{{ store.address || '' }}</text>
								</view>
							</view>
							<view class="cell-item-ft">
								<image class="cell-ft-next icon" src="/static/image/right.png"></image>
							</view>
						</view>
					</view>
					<view v-else class="cell-group margin-cell-group">
						<view class="cell-item add-title-item right-img no-store cell-item-bd-block">暂无门店</view>
					</view>
				</view>
			</view>

			<view class="cell-group margin-cell-group" v-if="storeSwitch == 1 && type_current === 1">
				<view class="cell-item user-head cell-item-mid">
					<view class="cell-item-hd">
						<view class="cell-hd-title">姓名</view>
					</view>
					<view class="cell-item-bd" style="width:88%;">
						<input class="cell-bd-input" style="width: 100%;" placeholder="请输入提货人姓名"
							v-model="store_pick.name" />
					</view>
				</view>
				<view class="cell-item cell-item-mid">
					<view class="cell-item-hd">
						<view class="cell-hd-title">电话</view>
					</view>
					<view class="cell-item-bd" style="width: 88%;">
						<input class="cell-bd-input" placeholder="请输入提货人电话" v-model="store_pick.mobile"
							style="width:100%;" />
					</view>
				</view>
			</view>

			<!-- 商品列表信息 -->
			<view class="img-list" style="margin: 0 30rpx;background-color: #202126;border-radius: 25rpx;">
				<view class="img-list-item" style="display: flex;padding: 20upx;">
					<image class="img-list-item-l little-img have-none" :src="gg.image_url"
						style="width: 216upx;height: 216upx;border-radius: 25rpx;"></image>
					<view class="img-list-item-r little-right" style="flex:1;">

						<view class="goods-item-c">
							<view class="GoodsName" style="color: #fff;">
								{{gg.name}}
							</view>
							<view class="goods-buy">
								<view class="goods-salesvolume" style="margin: 16rpx 0 36rpx 0;">
									{{ gg.spes_desc || '' }}
								</view>

							</view>
							<view class="Pricece" style="color: #F2D7AA;font-size: 24rpx;">
								<text
									style="color: #F2D7AA;font-size: 32rpx;font-weight: bold;">{{tjdata.sell_point}}</text>出局积分
							</view>
						</view>
					</view>
				</view>
				<!-- 	<view style="padding: 20upx 27upx;display: flex;align-items: center;color: #fff;">
					买家留言
					<input v-model="memo" placeholder="留言前建议先与商家协商一致" style="text-align:right;flex:1"
						placeholder-style="font-size:24rpx" />
				</view> -->
			</view>

			
		</view>


		<view class="button-bottom"
			style="align-items: center;justify-content: space-between;padding: 0 40rpx 0 48rpx;">
			<button
				style="width: 100%;height: 68rpx;background: linear-gradient(180deg, #F2D7AA 0%, #DEBC86 100%);opacity: 1;border-radius: 10rpx;font-size: 36rpx;color: #000;line-height: 68rpx;margin: 0;"
				form-type="submit" :disabled="submitStatus" :loading="submitStatus">立即购买</button>
		</view>
	</form>
</template>

<script>
	import uniSegmentedControl from '@/components/uni-segmented-control/uni-segmented-control.vue';
	import {
		goods,
		subscription
	} from '@/config/mixins.js';
	export default {
		mixins: [goods, subscription],
		data() {
			return {
				type_items: ['快递配送', '门店自提'], //门店自提切换
				type_current: 0,
				cartData: {}, // 购物车商品详情
				products: [], // 货品信息
				promotions: [], // 促销信息
				userShip: {}, // 用户收货地址
				receiptType: 1, // 订单类型 1是发货订单 2是门店自提订单
				params: {
					ids: 0, // 传递过来的购物车id
					area_id: 0, // 收货地址id
					coupon_code: '', // 优惠券码列表(string)多张逗号分隔
					point: 0, // 抵扣积分额
					type: 1, //购物车类型
					params: '' //购物车扩展信息
				}, // 监听params参数信息 以重新请求接口
				// 发票信息
				invoice: {
					type: '1', // 类型 1不开发票 2个人发票 3公司发票
					name: '不开发票', // 发票抬头
					code: '' // 发票税号
				},
				memo: '', // 买家留言
				items: ['选择优惠券', '输入券码'],
				orderType: 1, // 商品订单类型 1
				current: 0,
				isUsePoint: false, // 是否勾选使用积分
				userPointNums: 0, // 用户的总积分
				canUsePoint: 0, // 可以使用的积分
				pointMoney: '', // 积分抵扣的金额
				store: {
					id: 0,
					name: '',
					mobile: '',
					address: ''
				},
				store_pick: {
					name: '',
					mobile: ''
				},
				team_id: 0, //拼团id
				submitStatus: false,
				PID: 0,
				idd: 0,
				gg: {},
				tjdata: {}
			};
		},
		components: {
			uniSegmentedControl
		},
		onLoad(options) {
			this.PID = options.pid
			this.idd = options.id
			// 获取用户的默认收货地址信息
			this.userDefaultShip();
			this.getgood()
			this.gettjgood()
		},
		onShow() {
			let user_ship = this.$db.get('address_user_ship', true);
			if (user_ship) {
				this.userShip = user_ship;
				this.params.area_id = user_ship.area_id;
				this.$db.del('address_user_ship', true);
			}
			let user_invoice = this.$db.get('user_invoice', true);
			if (user_invoice) {
				this.invoice = user_invoice;
				this.$db.del('user_invoice', true);
			}
			let user_store = this.$db.get('user_store', true);
			if (user_store) {
				this.store = user_store;
				this.$db.del('user_store', true);
			}
			if (this.$store.state.shopAddress.id) {
				this.store = this.$store.state.shopAddress
			}
		},
		methods: {
			gettjgood() {
				this.$api.pointChujuDetail({
					id: this.idd
				}, res => {
					this.tjdata = res.data
				})
			},
			getgood() {
				this.$api.goodsDetail({
					id: this.PID
				}, res => {
					this.gg = res.data
				})
			},
			// 没有收货地址时跳转
			goAddress() {
				uni.navigateTo({
					url: '/pages/member/address/list?type=order'
				});
			},
			// 获取用户的默认收货地址
			userDefaultShip() {
				this.$api.userDefaultShip({}, res => {
					if (res.status && Object.keys(res.data).length) {
						this.userShip = res.data;
						this.params.area_id = this.userShip.area_id;
					}
				});
			},
			// 显示modal弹出框
			toshow() {
				this.$refs.lvvpopref.show();
			},
			// 关闭modal弹出框
			toclose() {
				this.$refs.lvvpopref.close();
			},
			// 去支付
			toPay2() {
				let that = this
				uni.showModal({
					content: '您确定购买商品吗？',
					success(res) {
						if (res.confirm) {
							that.toPay()
						}
					}
				})
			},
			toPay() {
				this.$api.tjcreate({
					id: this.idd - 0,
					product_id: this.PID - 0,
					uship_id: this.userShip.id
				}, res => {
					if (res.status) {
						uni.showToast({
							title: '购买成功',
							success() {
								setTimeout(() => {
									uni.redirectTo({
										url: '/pages/member/order/orderlist'
									})
								}, 1500)
							}
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
						})
					}
				})
			},
			// 跳转我的收货地址列表
			showAddressList() {
				this.$common.navigateTo('/pages/member/address/list?type=order');
			},
			// tab点击切换
			onClickItem(index) {
				if (this.current !== index) {
					this.current = index;
				}
			},

		},
		computed: {
			// 计算购物车商品数量
			productNums() {
				let nums = 0;
				for (let i in this.cartData.list) {
					if (this.cartData.list[i].is_select) {
						nums += this.cartData.list[i].nums;
					}
				}
				return nums;
			},
			// 判断商户是否开启积分抵扣 1开启 2未开启
			isOpenPoint() {
				return this.$store.state.config.point_switch;
			},
			// 获取使用的优惠券名称
			usedCouponsCompute() {
				let name = '未使用';
				if (Object.keys(this.usedCoupons).length) {
					let coupons = [];
					for (let i in this.usedCoupons) {
						coupons.push(this.usedCoupons[i]);
					}
					name = coupons.join();
				}
				return name;
			},
			// 判断是否开启发票功能
			invoiceSwitch() {
				return this.$store.state.config.invoice_switch || 2;
			},
			// 判断店铺开关
			storeSwitch() {
				return this.$store.state.config.store_switch || 2;
			},
			// 根据接口返回数据判断是否使用优惠券
			couponIsUsed() {
				return this.cartData.coupon instanceof Array;
			}
		},
	};
</script>

<style scoped>
	.content-top {
		/* #ifdef MP-WEIXIN */
		padding-bottom: 116rpx;
		/* #endif */
	}

	.coupon-enter {
		display: flex;
		height: 60upx;
		margin: 40upx;
	}

	.coupon-enter>view {
		display: inline-block;
	}

	.coupon-input {
		/* width: 450upx; */
		flex: 1;
		border: 2upx solid #e8e8e8;
		background-color: #fff;
		height: 100%;
		display: block;
	}

	.coupon-input input {
		height: 100%;
		font-size: 26upx;
		padding: 2upx 10upx;
	}

	.coupon-code {
		margin: 4upx 30upx;
	}

	.input-arr {}

	.coupon-enter-btn {
		height: 100%;
		margin-left: 20upx;
	}

	.coupon-enter-btn .btn {
		font-size: 24upx;
		height: 100%;
		width: 108upx;
		line-height: 58upx;
	}

	.bg-c {
		background-color: #ccc;
	}

	.no-store {
		text-align: center;
		padding: 30upx 0;
		font-size: 26upx;
		color: #666;
		/* min-height: 60upx; */
	}

	.coupon-none {
		text-align: center;
		padding: 120upx 0;
	}

	.coupon-none-img {
		width: 274upx;
		height: 274upx;
	}

	.coupon-list {
		padding: 0 40rpx;
	}

	.coupon-item {
		background-color: #fff;
		margin-bottom: 20rpx;
		position: relative;
	}

	.coupon-name {
		padding: 10rpx 34rpx 10rpx 10rpx;
	}

	.coupon-code1 {
		padding: 10rpx;
	}

	.delete {
		position: absolute;
		top: 10rpx;
		right: 0;
	}

	.delete image {
		width: 40rpx;
		height: 40rpx;
	}

	.margin-cell-group {
		margin: 0 0 2upx 0;
	}

	.cell-group {
		background: #202126;
	}

	.add-title-items {
		text-align: center;
	}

	.add-title-items .btn {
		height: ;
		font-size: 24upx;
		/* margin: 0 auto; */
	}

	.add-title-item .cell-item-hd {
		min-width: 40upx;
		color: #666;
		font-size: 28upx;
	}

	.add-title-item .cell-item-bd {
		color: #333;
		font-size: 28upx;
		width: 100%;
	}

	.cell-item {
		background-color: #202126;
	}

	.add-title-item .cell-bd-text {
		bottom: 0;
		color: #fff;
	}

	.add-title-item .cell-item-bd .cell-bd-view {
		justify-content: space-between;
		color: #fff;
	}

	.cell-bd-view:first-child {
		margin-bottom: 8upx;
	}

	.cell-ft-view:first-child {
		margin-bottom: 8upx;
	}

	.address {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		width: 100%;
	}

	.img-list {
		margin-bottom: 20upx;
	}

	.button-bottom {
		height: 166rpx;
		box-shadow: none;
	}

	.button-bottom button {
		height: 100%;
		width: 280upx;
	}

	.button-bottom-c {
		display: inline-block;
		position: relative;
		padding: 10upx 26upx;
		height: 100%;
		width: 470upx;
		float: left;
		font-size: 22upx;
		color: #666;
		overflow: hidden;
	}

	.button-bottom-c-t {
		font-size: 22upx;
		color: #999;
		display: inline-block;
		float: left;
		height: 100%;
		line-height: 70upx;
	}

	.button-bottom-c-b {
		font-size: 26upx;
		color: #333;
		display: inline-block;
		float: right;
		height: 100%;
		line-height: 70upx;
	}

	.invoice .cell-ft-text {
		/* top: 4upx; */
		color: #666;
		font-size: 24upx;
	}

	.cell-item-ft .cell-bd-input {
		text-align: right;
		width: 250px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.pop-t {
		border-bottom: 2upx solid #f4f4f4;
		background-color: #fff;
	}

	.pop-b {
		margin-bottom: 90upx;
	}

	.pop-b-t {
		background-color: #fff;
		width: 100%;
		padding-top: 10upx;
	}

	.coupon-c {
		/* padding: 50upx; */
		height: 546upx;
		box-sizing: border-box;
	}

	.coupon-c-item {
		margin: 30upx;
		/* width: 100%; */
		height: 150upx;
		margin-bottom: 20upx;
	}

	.cci-l {
		width: 60upx;
		height: 100%;
		background-color: #ff7159;
		font-size: 32upx;
		display: inline-block;
		box-sizing: border-box;
		float: left;
		border-top-left-radius: 16upx;
		border-bottom-left-radius: 16upx;
	}

	.cci-l-c {
		height: 60upx;
		line-height: 44upx;
		width: 150upx;
		text-align: center;
		transform-origin: 30upx 30upx;
		transform: rotate(90deg);
	}

	.cci-r {
		position: relative;
		height: 150upx;
		width: calc(100% - 70upx);
		margin-left: 10upx;
		display: inline-block;
		background-color: #fff;
	}

	.cci-r-img {
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #fff;
	}

	.cci-r-c {
		position: relative;
		z-index: 99;
	}

	.ccirc-t {
		font-size: 24upx;
		padding: 10upx 20upx;
		min-height: 56upx;
	}

	.ccirc-b {
		padding: 10upx;
		position: relative;
	}

	.ccirc-b-l {
		display: inline-block;
		max-width: 400upx;
	}

	.ccirc-b-tip {
		font-size: 28upx;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		min-height: 38upx;
	}

	.ccirc-b-tip text {
		font-size: 34upx;
	}

	.ccirc-b-time {
		font-size: 24upx;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.ccirc-b-r {
		display: inline-block;
		background-color: #ff7159;
		font-size: 26upx;
		padding: 4upx 10upx;
		border-radius: 4upx;
		position: absolute;
		right: 20upx;
		bottom: 12upx;
	}

	.pop-c .btn {
		width: 100%;
	}

	.leave-message {
		margin: 20upx 0;
	}

	.leave-message .cell-item {
		border-bottom: 0;
	}

	.cell-textarea {
		padding: 0 26upx 20upx;
	}

	/* #ifndef MP-WEIXIN */
	.cell-textarea textarea {
		width: 100%;
		height: 100upx;
		font-size: 26upx;
		color: #333;
	}

	/* #endif */
	/* #ifdef MP-WEIXIN */
	.cell-textarea input {
		width: 100%;
		font-size: 26upx;
		color: #333;
	}

	/* #endif */
	.coupon-enter {
		display: flex;
		height: 60upx;
		margin: 40upx;
	}

	.coupon-enter>view {
		display: inline-block;
	}

	.coupon-input {
		/* width: 450upx; */
		flex: 1;
		border: 2upx solid #e8e8e8;
		background-color: #fff;
		height: 100%;
		display: block;
	}

	.coupon-input input {
		height: 100%;
		font-size: 26upx;
		padding: 2upx 10upx;
	}

	.coupon-code {
		margin: 4upx 30upx;
	}

	.input-arr {}

	.coupon-enter-btn {
		height: 100%;
		margin-left: 20upx;
	}

	.coupon-enter-btn .btn {
		font-size: 24upx;
		height: 100%;
		width: 108upx;
		line-height: 58upx;
	}

	.bg-c {
		background-color: #ccc;
	}

	.no-store {
		text-align: center;
		padding: 30upx 0;
		font-size: 26upx;
		color: #666;
		/* min-height: 60upx; */
	}

	.coupon-none {
		text-align: center;
		padding: 120upx 0;
	}

	.coupon-none-img {
		width: 274upx;
		height: 274upx;
	}

	.coupon-list {
		padding: 0 40rpx;
	}

	.coupon-item {
		background-color: #fff;
		margin-bottom: 20rpx;
		position: relative;
	}

	.coupon-name {
		padding: 10rpx 34rpx 10rpx 10rpx;
	}

	.coupon-code1 {
		padding: 10rpx;
	}

	.delete {
		position: absolute;
		top: 10rpx;
		right: 0;
	}

	.delete image {
		width: 40rpx;
		height: 40rpx;
	}

	.promotion-item {
		display: inline-block;
		float: left;
		margin-right: 10upx;
		margin-bottom: 4upx;
		background-color: #FF7159;
		color: #fff;
		height: 34upx;
		font-size: 24upx;
		line-height: 34upx;
		padding: 0 10upx;
	}
</style>